
const Item = {
    // 声明自定义事件
    emits: [ 'increase' , 'decrease' ],
    // 声明 prop (与父组件件中通过 attribute 传递的数据对应)
    props: {
        entry: {
            type: Object,
            required: true
        },
        ordinal: {
            type: Number,
            required: false
        }
    },
    methods: {
        jiang(id) {
            console.log(`使${id}数量降低`);
            // 触发自定义事件并向父组件传递数据
            this.$emit( 'decrease' , { id: id } );
        },
        sheng(id) {
            console.log(`使${id}数量增加`);
            // 触发自定义事件并向父组件传递数据
            this.$emit( 'increase' , { id: id } );
        }
    },
    template: `<div class="cart-item">
                    <span>{{ ordinal }}</span>
                    <span>{{ entry.name }}</span>
                    <span>{{ entry.price }}</span>
                    <span>
                        <button @click="jiang(entry.id)">-</button>
                        <button>{{ entry.amount }}</button>
                        <button @click="sheng(entry.id)">+</button>
                    </span>
                    <span>{{ entry.price * entry.amount }}</span>
                </div>`
}

const Total = {
    props: {
        totalPrice: {
            type: Number,
            required: true
        }
    },
    computed: {
        price(){
            return this.totalPrice.toLocaleString('zh-CN',{ style: 'currency' , currency: 'CNY' });
        }
    },
    template: `<div class="total">
                    <span>{{ price }}</span>
               </div>`
}


const Cart = {
    data(){
        return {
            items: [
                { id: 12 , name: '藜蒿炒腊肉' , price: 50 , amount: 50 },
                { id: 10 , name: '荷包辣椒荷包蛋' , price: 28 , amount: 100 },
                { id: 11 , name: '毛血旺' , price: 26 , amount: 150 },
                { id: 27 , name: '回锅肉' , price: 40 , amount: 20 }
            ]
        }
    },
    // 注册子组件
    components: {
        'cart-item': Item ,
        'cart-total': Total  
    },
    methods: {
        handleIncrease(payload){
            console.log( 'increase' );
            // 采用解构赋值方式从 payload 中获得 id
            const { id } = payload ;
            // 根据 id 寻找指定的 购物车项 (item)
            let item = this.items.find( e => e.id == id );
            // 若找到相应的 购物车项 (item)
            if( item ) {
                // 则使当前购物车项的 amount 增加
                item.amount++ ;
            }
        },
        handleDecrease(payload){
            console.log( 'decrease' );
            // 采用解构赋值方式从 payload 中获得 id
            const { id } = payload ;
            // 根据 id 寻找指定的 购物车项 (item)
            let item = this.items.find( e => e.id == id );
            // 若找到相应的 购物车项 (item)
            if( item ) {
                // 则使当前购物车项的 amount 减少
                item.amount-- ;
            }
        }
    },
    computed: {
        totalPrice(){
            return this.items.reduce( (p,c) => p + c.price * c.amount , 0 );
        }
    },
    template: `<div class="shopping-cart">
                    <cart-item v-for="(item,index) in items" 
                               v-bind:entry="item"
                               v-bind:ordinal="index+1"
                               v-on:increase="handleIncrease"
                               v-on:decrease="handleDecrease">
                    </cart-item>
                    <cart-total v-bind:total-price="totalPrice"></cart-total>
               </div>`,
}

const options = {
    // 注册子组件
    components: {
        'shopping-cart': Cart
    },
    template: `<shopping-cart></shopping-cart>`
}

const app = Vue.createApp(options);
const root = app.mount('#root');
console.log( 'root component: ' , root );